import React from 'react';
import { Component } from 'react';
import { Link } from 'react-router';
import Order from './order/Order.jsx';
import Evaluate from './evaluate/Evaluate.jsx';
import Seller from './seller/Seller.jsx';

require('./Shop.scss');

export default class Shop extends Component {
    constructor() {
        super();
        this.state = {
            tabChoose: "goods"//goods, comments, shop
        };
    }
    render() {
        var shop = {
            name:"杨明宇黄焖鸡",
            logoSrc: "shop_logo.png",
            inf: "评价4.7 月售1895单 蜂鸟专送约27分钟",
            redEnvelopes: 8,
            redEnvelopesType: "无门槛",
            discount: "新用户下单立减25元(不与其他活动同享)"
        }
        return (
            <div className="shop_wrapper">
                <section className="shop_index">
                    <Link to="/"><div className="back">{"<"}</div></Link>
                    <div className="shop_logo"><img src={`client/images/${shop.logoSrc}`}></img></div>
                    <div className="shop_name">{shop.name}</div>
                    <div className="shop_inf">{shop.inf}</div>
                    <div className="shop_red_envelopes">红包￥{shop.redEnvelopes}</div>
                    <div className="shop_discount">{shop.discount}</div>
                </section>
                <section className="shop_navigation">
                    <div 
                        className={`shop_option ${this.state.tabChoose=='goods'?'option_choose':''}`}
                        onClick={()=>{this.setState({tabChoose: 'goods'})}}
                    ><span className="tabs_border_tag">点餐</span></div>
                    <div 
                        className={`shop_option ${this.state.tabChoose=='comments'?'option_choose':''}`}
                        onClick={()=>{this.setState({tabChoose: 'comments'})}}
                    ><span className="tabs_border_tag">评价</span></div>
                    <div 
                        className={`shop_option ${this.state.tabChoose=='shop'?'option_choose':''}`}
                        onClick={()=>{this.setState({tabChoose: 'shop'})}}
                    ><span className="tabs_border_tag">商家</span></div>
                </section>
                <section className="business">
                    <div className={`${this.state.tabChoose=='goods'?'show':'hide'}`}>
                        <Order/>
                    </div>
                    <div className={`${this.state.tabChoose=='comments'?'show':'hide'}`}>
                        <Evaluate/>
                    </div>
                    <div className={`${this.state.tabChoose=='shop'?'show':'hide'}`}>
                        <Seller/>
                    </div>
                </section>
            </div>
        );
    }
}